<script lang="ts">
export default {
  name: 'Test-test2-1'
}
</script>

<template>
  <h2>任务管理器</h2>
  <div class="note">
    <h3>题目内容：</h3>
    <p>1. 使用 Vue 3 的响应式数据来管理一个简单的任务列表。</p>
    <p>2. 当任务未完成时，任务名称显示为黑色，当任务完成时，任务名称显示为绿色并带有删除线。</p>
    <p>3. 通过点击任务，可以切换任务的完成状态。</p>
    <p>4. 使用计算属性来显示已完成任务的数量。</p>
    <p>5. 使用条件渲染，当没有任务时，显示“没有任务”。</p>
  </div>
  <div class="note">
    <h3>要求的功能点：</h3>
    <p>1. 任务状态管理（完成/未完成）。</p>
    <p>2. 通过按钮切换任务的完成状态。</p>
    <p>3. 动态计算并显示已完成任务的数量。</p>
    <p>4. 当没有任务时，显示“没有任务”的提示。</p>
  </div>
  <div class="group">
    <h2>任务列表</h2>

    <!-- 当没有任务时显示 -->
    <p v-if="taskData.length === 0">没有任务</p>

    <!-- 当有任务时显示 -->
    <ul v-else v-for="task in taskData" :key="task.id" :task="task">
      <li>
        <!-- 三目运算符选择对应样式 -->
        <span :class="task.isComputed ? 'completed': 'not-completed'">{{task.name}}</span>
        <!-- 函数传参 -->
        <button @click="taggleStatus(task)">切换状态</button>
      </li>
    </ul>

    <p >已完成任务数：{{  compuedTaskNum  }}</p>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

// 创建响应式数据
const taskData = ref([
  {id: 1, name:'打游戏', isComputed: false},
  {id: 2, name:'洗衣服', isComputed: false},
  {id: 3, name:'打扫卫生', isComputed: false},
])

// 切换状态
const taggleStatus = (task:any)=>{
  task.isComputed = !task.isComputed
}

// 动态计算
const compuedTaskNum = computed(()=>{
  return taskData.value.filter(task=>task.isComputed).length
  }
)
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

.completed {
  color: green;
  text-decoration: line-through;
}

.not-completed {
  color: black;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}

body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
